<template>
  <div class="flex">
    <!--背景图片-->
    <q-img
      src="bg/sage_bg.jpg"
      class="fullscreen"
      fit="cover"
      style="z-index: -1"
    />
    <!--遮罩颜色-->
    <div class="fullscreen" :class="ui.modelClass" style="z-index: -1"></div>
    <q-layout class="front">
      <q-header
        elevated
        style="height: 50px; line-height: 50px"
        :class="ui.headerClass"
        v-show="headerVisible"
      >
        <q-toolbar>
          <q-icon
            class="cursor-pointer"
            size="md"
            name="arrow_back_ios"
            v-if="!!$route.meta.back"
            @click="goBack()"
          />
          <q-separator
            size="0.5rem"
            color="accent"
            vertical
            style="height: 30px; margin: auto"
          />
          <q-toolbar-title style="letter-spacing: 2px">
            <span @click.stop="goBack()">{{
              $route.meta.title ? $route.meta.title : route.query.title
            }}</span>
          </q-toolbar-title>
          <!--          tab 导航-->
<!--          夹爪-->
          <q-icon
            class="cursor-pointer"
            size="md"
            name="account_tree"
            @click="showGrabCtrlDialog"
          />
          <div>
            <div
              class="q-mr-md"
              v-if="locale === 'zh-CN' ? !$q.screen.lt.sm : !$q.screen.lt.md"
            >
              <q-btn
                v-for="item in menus"
                :key="item.title"
                :label="item.title"
                :icon="item.icon"
                flat
                no-caps
                size="sm"
                v-show="item.active"
                @click="skip(item.link)"
                padding="15px 5px"
              />
            </div>
            <q-btn-dropdown
              v-else-if="menus.some((item) => item.active)"
              split
              color="purple"
              no-caps
              icon="home"
              label="首页"
              @click="router.push('/main')"
              class="q-mr-xl"
            >
              <q-list>
                <q-item
                  clickable
                  v-for="item in menus"
                  :key="item.title"
                  @click="skip(item.link)"
                  v-show="item.active"
                >
                  <q-item-section avatar class="q-pa-none">
                    <q-icon :name="item.icon" color="purple" />
                  </q-item-section>
                  <q-item-section>
                    <q-item-label class="text-h6">{{
                      item.title
                    }}</q-item-label>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-btn-dropdown>
          </div>
          <q-btn
            icon="login"
            @click="router.push('/')"
            v-if="mode === 'server'"
          >
            <q-tooltip> 返回登录页面 </q-tooltip>
          </q-btn>
          <span
            v-if="mode === 'remote' && useFunctionsStore().isIP"
            class="text-bold text-subtitle1 q-pr-xs"
            >{{ useAPIStore().deviceIP }}</span
          >
          <q-btn
            class="q-mr-md"
            icon="exit_to_app"
            @click="Exit"
            v-if="mode === 'remote'"
          >
            <q-tooltip> 退出{{ status.device }}连接 </q-tooltip>
          </q-btn>
          <status-component
            :isConnected="isConnected"
            :deviceStatus="status"
            v-if="mode !== 'server'"
          />
        </q-toolbar>
      </q-header>
      <q-page-container>
        <!--路由页面-->
        <router-view style="height: calc(100vh - 50px)" />
      </q-page-container>
    </q-layout>
  </div>

<!--  抓取控制弹窗-->
  <grab-ctrl-dialog/>
</template>

<script setup>
import { onBeforeMount, ref, provide, onMounted, computed } from "vue";
import { useUiStore } from "stores/ui";
import { useFunctionsStore } from "stores/functions";
import { useRoute, useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import deviceWs, { closeWs, isConnected, status } from "src/utils/deviceWs";
import centerWs from "components/rosMapRemote/centerWs.js";
import StatusComponent from "components/status/IndexPage.vue";
import { useI18n } from "vue-i18n";
import { useQuasar } from "quasar";
// import { setLanguage } from "src/hooks/useLanguage";
import { useAPIStore } from "stores/api";
import GrabCtrlDialog from "components/dialog/GrabCtrlDialog.vue";


const t = useI18n().t;
const locale = useI18n().locale;
const $q = useQuasar();
$q.screen.setSizes({ sm: 770, md: 1100 });
const ui = useUiStore();
const router = useRouter();
const route = useRoute();
const { mode, menuList } = storeToRefs(useFunctionsStore());
const headerVisible = ref(true);
provide("headerVisible", headerVisible);
const menus = computed(() => menuList.value.filter((item) => !item.isHidden));

onBeforeMount(() => {
  if (
    mode.value === "device" ||
    mode.value === "mobile" ||
    mode.value === "remote"
  ) {
    deviceWs();
  } else {
    centerWs();
  }
});

// onMounted(() => {
//   setLanguage(); // 初始化语言
// });

// 路由回退
function goBack() {
  router.push(route.meta.back);
}

const showGrabCtrlDialog = ()=>{
  console.log('夹爪控制')
}

// 退出直连模式
function Exit() {
  $q.dialog({
    title: "退出该设备",
    message: "是否要立即退出该设备,返回至中控？",
    ok: { label: "确定", class: "text-bold", flat: true },
    cancel: {
      label: "取消",
      class: "text-bold",
      color: "secondary",
      flat: true,
    },
    persistent: true,
  }).onOk(() => {
    useFunctionsStore().mode = "server";
    closeWs(); // 断开连接机器人
    centerWs(); // 连接中控
    router.push("/RemoteManage"); // 远程控制页面
    useFunctionsStore().setRoutes();
  });
}

// tab 跳转
function skip(data) {
  router.push("/" + data);
}
</script>
<style scoped>
.front {
  z-index: 1;
  position: absolute;
  overflow: hidden;
}
</style>
